<template>
  <div class="container">
    <h1>一个简易的文本编辑器</h1>
    <div class="editor">
      <quill-editor
        class="editor-quill"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
      </quill-editor>
      <button @click="showContent">提交文本</button>
    </div>
    <h2>编辑结果</h2>
    <div class="show">
      <div v-html="showText"></div>
    </div>
  </div>
</template>

<script>
import quillConfig from '@/components/guill_config.js'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'App',
  data () {
    return {
      content: '',
      showText: '',
      editorOption: quillConfig
    }
  },
  mounted () {
    quillConfig.initButton()
    // console.log(this.$store.state.contentTemp)
    console.log(this.contentTemp)
  },
  computed: {
    ...mapState([
      'contentTemp'
    ]),
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  watch: {
    contentTemp (newVal, oldVal) {
      if (newVal === '') {
        this.content = newVal
        //  console.log('content被清空：', this.content)
      }
    }
  },
  methods: {
    ...mapMutations([
      'SET_CONTENT'
    ]),
    onEditorReady (editor) {
      // 准备编辑器
    },
    onEditorBlur () {}, // 失去焦点事件
    onEditorFocus () {}, // 获得焦点事件
    onEditorChange (e) {
      this.SET_CONTENT(this.content)
    }, // 内容改变事件

    // 展示编辑的内容
    showContent () {
      this.showText = this.content
      // console.log(this.showText)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 60px;
  text-align: left;
  color: #2c3e50;
  font-size: 13px;
  .editor {
    position: relative;
    width: 600px;
    height: 400px;
    &-quill {
      height: 350px;
    }
    button {
      position: absolute;
      right: 30px;
      bottom: 30px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      line-height: 1.5;
      color: #fff;
      background-color: #4893ff;
    }
  }
  h2 {
    margin-top: 10px;
  }
  .show {
    padding: 10px;
    width: 580px;
    height: 200px;
    border: 1px solid #333;
    border-radius: 10px;
    line-height: 1;
  }
}

</style>

<style>
.ql-size-huge {
  font-size: 32.5px;
}
.ql-size-large {
  font-size: 19.5px;
}
.ql-size-normal {
  font-size: 13px;
}
.ql-size-small {
  font-size: 12.8px;
}
</style>
